<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <style type="text/css">
      #top-button {
        left: 1px;
        position: absolute;
        top: 1px;
        z-index: 1;
      }

      #top-button:focus {
        background-color: #B60000;
        color: White;
      }
    </style>
  </head>
  <body>
    <button id="top-button">First button on the page</button>
    <main id="webchat"></main>
    <script>
      run(async function () {
        WebChat.renderWebChat(
          {
            directLine: testHelpers.createDirectLineWithTranscript(
              testHelpers.transcriptNavigation.generateTranscript()
            ),
            store: testHelpers.createStore()
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        await pageConditions.numActivitiesShown(32);
        await pageConditions.scrollToBottomCompleted();

        // SETUP: Focus on the send box.
        await pageObjects.focusSendBoxTextBox();

        // WHEN: SHIFT-TAB key is pressed twice, from the send box.
        await host.sendShiftTab(2);

        // THEN: It should show a focus indicator around the transcript with the words "End of chat history".
        await host.snapshot();

        // WHEN: SHIFT-TAB key is pressed from the "End of chat history" note.
        await host.sendShiftTab();

        // THEN: It should show a focus indicator around the transcript, and an active indicator around the last activity.
        await host.snapshot();

        // WHEN: SHIFT-TAB key is pressed from the transcript.
        await host.sendShiftTab();

        // THEN: It should focus on the first button outside of Web Chat.
        await host.snapshot();

        // WHEN: TAB key is pressed from the widget before Web Chat.
        await host.sendTab();

        // THEN: It should focus back on the transcript, show a focus indicator around the transcript, and an active indicator around the last activity.
        await host.snapshot();

        // WHEN: TAB key is pressed from the transcript.
        await host.sendTab();

        // THEN: It should focus on the terminator, show a focus indicator around the transcript with the words "End of transcript".
        await host.snapshot();
      });
    </script>
  </body>
</html>
